<template>
  <i-biz-control-base :controller="c">
    <i-biz-scroll-refresh-load
      v-if="!!c.state.isCreated && c.state.rows.length > 0"
      :finished="c.state.total <= c.state.rows.length"
      :loading="c.state.isLoading"
      @load="() => c.loadMore()"
      @refresh="() => c.refresh()"
    >
      <uni-list>
        <template v-if="c.model.groupMode !== 'NONE'">
          <view
            v-for="(group, index) in c.state.groups"
            :key="index"
            :title="group.caption"
          >
            <view :class="ns.b('group-caption')">{{ group.caption }}</view>
            <template
              v-if="!!(leftSlidingActionGroup || rightSlidingActionGroup)"
            >
              TODO 滑动单元格暂未支持
            </template>
            <!-- 绘制项 -->
            <template v-else>
              <template v-if="!!c.model.itemLayoutPanel">
                <view
                  v-if="mode === 'SELECT'"
                  :class="ns.b('select-item')"
                  @click="() => c.onRowClick(group.data)"
                >
                  <checkbox :checked="isSelect(group.data)" />
                  <i-biz-control-shell
                    :data="group.data"
                    :class="calcItemClass(group.data)"
                    :modelData="c.model.itemLayoutPanel"
                    :context="c.context"
                    :params="c.params"
                  ></i-biz-control-shell>
                </view>
                <view v-else @click="() => c.onRowClick(group.data)">
                  <i-biz-control-shell
                    :data="group.data"
                    :class="calcItemClass(group.data)"
                    :modelData="c.model.itemLayoutPanel"
                    :context="c.context"
                    :params="c.params"
                  ></i-biz-control-shell>
                </view>
              </template>
              <uni-list-item
                v-else
                :class="calcItemClass(group.data)"
                :title="group.data.srfmajortext || ''"
                showArrow
                clickable
                @click="() => c.onRowClick(group.data)"
              >
                <image
                  v-if="
                    Object.prototype.hasOwnProperty.call(group.data, 'image')
                  "
                  :class="ns.b('image')"
                  :src="group.data.image"
                  alt=""
                ></image>
                <checkbox
                  :class="ns.bm('item', 'right')"
                  :checked="isSelect(group.data)"
                />
              </uni-list-item>
            </template>
          </view>
        </template>
        <template v-else>
          <template v-for="(row, index) in c.state.rows" :key="index">
            <!-- 绘制滑动按钮组 -->
            <template
              v-if="!!(leftSlidingActionGroup || rightSlidingActionGroup)"
            >
              <i-biz-swipe-action>
                <!-- 绘制右滑行为组 -->
                <template
                  v-if="
                    !!rightSlidingActionGroup.uiactionGroupDetails &&
                    rightSlidingActionGroup.uiactionGroupDetails.length > 0
                  "
                  #left
                >
                  <template
                    v-for="detail in rightSlidingActionGroup.uiactionGroupDetails"
                    :key="detail.id"
                  >
                    <button
                      v-if="
                        row.uaColStates[rightSlidingActionGroup.id][detail.id]
                          .visible !== false
                      "
                      type="primary"
                      size="mini"
                      :disabled="
                        row.uaColStates[rightSlidingActionGroup.id][detail.id]
                          .disabled ||
                        row.uaColStates[rightSlidingActionGroup.id][detail.id]
                          .loading
                      "
                      @click="(e: MouseEvent) => c.onActionClick(detail, row, e)"
                    >
                      {{ detail.caption }}
                    </button>
                  </template>
                </template>
                <!-- 绘制左滑行为组 -->
                <template
                  v-if="
                    leftSlidingActionGroup.uiactionGroupDetails &&
                    leftSlidingActionGroup.uiactionGroupDetails.length > 0
                  "
                  #right
                >
                  <template
                    v-for="detail in rightSlidingActionGroup.uiactionGroupDetails"
                    :key="detail.id"
                  >
                    <button
                      v-if="
                        row.uaColStates[leftSlidingActionGroup.id][detail.id]
                          .visible !== false
                      "
                      type="primary"
                      :disabled="
                        row.uaColStates[leftSlidingActionGroup.id][detail.id]
                          .disabled ||
                        row.uaColStates[leftSlidingActionGroup.id][detail.id]
                          .loading
                      "
                      @click="(e: MouseEvent) => c.onActionClick(detail, row, e)"
                    >
                      {{ detail.caption }}
                    </button>
                  </template>
                </template>
                <!-- 绘制项 -->
                <template #default>
                  <template v-if="!!c.model.itemLayoutPanel">
                    <view
                      v-if="mode === 'SELECT'"
                      :class="ns.b('select-item')"
                      @click="() => c.onRowClick(row.data)"
                    >
                      <checkbox :checked="isSelect(group.data)" />
                      <i-biz-control-shell
                        :data="row.data"
                        :class="calcItemClass(row.data)"
                        :modelData="c.model.itemLayoutPanel"
                        :context="c.context"
                        :params="c.params"
                      ></i-biz-control-shell>
                    </view>
                    <view v-else @click="() => c.onRowClick(row.data)">
                      <i-biz-control-shell
                        :data="row.data"
                        :class="calcItemClass(row.data)"
                        :modelData="c.model.itemLayoutPanel"
                        :context="c.context"
                        :params="c.params"
                      ></i-biz-control-shell>
                    </view>
                  </template>
                  <uni-list-item
                    v-else
                    :class="calcItemClass(row.data)"
                    :title="row.data.srfmajortext || ''"
                    clickable
                    showArrow
                    @click="() => c.onRowClick(row.data)"
                  >
                    <image
                      v-if="
                        Object.prototype.hasOwnProperty.call(row.data, 'image')
                      "
                      :class="ns.b('image')"
                      :src="row.data.image"
                      alt=""
                    ></image>
                    <checkbox
                      v-if="props.mode === 'SELECT'"
                      :class="ns.bm('item', 'right')"
                      :checked="isSelect(row.data)"
                    />
                  </uni-list-item>
                </template>
              </i-biz-swipe-action>
            </template>
            <!-- 绘制项 -->
            <template v-else>
              <template v-if="!!c.model.itemLayoutPanel">
                <view
                  v-if="mode === 'SELECT'"
                  :class="ns.b('select-item')"
                  @click="() => c.onRowClick(row.data)"
                >
                  <checkbox :checked="isSelect(group.data)" />
                  <i-biz-control-shell
                    :data="row.data"
                    :class="calcItemClass(row.data)"
                    :modelData="c.model.itemLayoutPanel"
                    :context="c.context"
                    :params="c.params"
                  ></i-biz-control-shell>
                </view>
                <view v-else @click="() => c.onRowClick(row.data)">
                  <i-biz-control-shell
                    :data="row.data"
                    :class="calcItemClass(row.data)"
                    :modelData="c.model.itemLayoutPanel"
                    :context="c.context"
                    :params="c.params"
                    @click="() => c.onRowClick(row.data)"
                  ></i-biz-control-shell
                ></view>
              </template>
              <uni-list-item
                v-else
                :class="calcItemClass(row.data)"
                :title="row.data.srfmajortext || ''"
                clickable
                showArrow
                @click="() => c.onRowClick(row.data)"
              >
                <image
                  v-if="Object.prototype.hasOwnProperty.call(row.data, 'image')"
                  :class="ns.b('image')"
                  :src="row.data.image"
                  alt=""
                ></image>
                <checkbox
                  v-if="props.mode === 'SELECT'"
                  :class="ns.bm('item', 'right')"
                  :checked="isSelect(row.data)"
                />
              </uni-list-item>
            </template>
          </template>
        </template>
      </uni-list>
      <view
        v-if="loadMode !== 'auto' && c.state.total > c.state.items.length"
        :class="ns.b('load-more')"
        @click="() => c.loadMore()"
      >
        <text>加载更多</text>
      </view>
    </i-biz-scroll-refresh-load>
    <template v-else>
      <i-biz-no-data
        v-if="c.state.isLoaded"
        :text="c.model.emptyText"
        :emptyTextLanguageRes="c.model.emptyTextLanguageRes"
      ></i-biz-no-data>
    </template>
  </i-biz-control-base>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  },
};
</script>
<script setup lang="ts">
import { PropType } from "vue";
import { IDEMobMDCtrl, IUIActionGroup } from "@ibiz/model-core";
import { useControlController, useNamespace } from "@/use";
import { IMobMDCtrlRowState, MDCtrlController } from "@ibiz-template/runtime";

const props = defineProps({
  modelData: { type: Object as PropType<IDEMobMDCtrl>, required: true },
  context: { type: Object as PropType<IContext>, required: true },
  params: { type: Object as PropType<IParams>, default: () => ({}) },
  mdctrlActiveMode: { type: Number, default: 1 },
  singleSelect: { type: Boolean, default: true },
  selectedData: { type: Object as PropType<IData[]>, required: false },
  mode: { type: String, default: "LIST" },
  loadMode: { type: String, default: "auto" },
  loadDefault: { type: Boolean, default: true },
});

const c = useControlController((...args) => new MDCtrlController(...args));
const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
// 左滑界面行为组
const leftSlidingActionGroup = c.model.deuiactionGroup;
// 右滑界面行为组
const rightSlidingActionGroup = c.model.deuiactionGroup2;

const isSelect = (row: IData) => {
  const findIndex = c.state.selectedData.findIndex((data) => {
    return data.srfkey === row.srfkey;
  });
  return findIndex !== -1;
};
const calcItemClass = (row: IData) => {
  const select = isSelect(row);
  const itemClass = [ns.b("item"), ns.is("active", select)];
  return itemClass;
};
</script>
<style lang="scss">
@import "./i-biz-md-ctrl-control.scss";
</style>
